<template>
  <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in pic" :key="index">
        <a v-if="!item.goodsId" :style="{ paddingBottom: paddBom }" class="img-holder" :href="item.advLink">
          <img class="obj-cover" :src="item.imgUrl">
        </a>
        <router-link v-else :style="{ paddingBottom: paddBom }" class="img-holder" :to="{ path: '/goods/detail', query: { id: item.goodsId } }">
          <img class="obj-cover" :src="item.imgUrl">
        </router-link>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  props: {
    pic: {
      type: Array,
      default: []
    },
    paddBom: {
      type: String
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 4000,
        autoplayDisableOnInteraction: false
      }
    }
  }
}
</script>

<style>
.img-holder {
  position: relative;
}
.swiper-pagination {
  bottom: 3px !important;
}
.swiper-pagination-bullet {
  border: 1px solid #fff;
  opacity: 1 !important;
  margin: 0 3px !important;
  background: transparent !important;
}
.swiper-pagination-bullet-active {
  background: #fff !important;
}
</style>
